
.focus-space-animated-background  {
  @apply backdrop-blur-md;
  background-color: oklch(0% 0 0/.4);
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;

  .wave {
    @apply bg-linear-to-r from-primary/40 via-secondary/40 to-accent/60;
    border-radius: 1000% 1000% 0 0;
    position: absolute;
    width: 200%;
    height: 12em;
    animation: focus-space-wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.5;
    bottom: -7%;
    left: 0;
    z-index: -1;
  }

  .wave:nth-of-type(2) {
    bottom: -9%;
    animation: focus-space-wave 18s linear reverse infinite;
    opacity: 0.3;
  }

  .wave:nth-of-type(3) {
    bottom: -12%;
    animation: focus-space-wave 20s -1s reverse infinite;
    opacity: 0.2;
  }
}

.focus-space-fireflies {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
}


@keyframes focus-space-animated-gradient-background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}